<template>
   <!-- 给每一项都添加一个点击跳转到对应id的文章详情页事件 -->
  <div @click="$router.push('/article/'+artID)">
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box" >
          <!-- 标题 -->
          <span>{{article.title}}</span>
          <!-- 单张图片 -->
          <img
           v-if="article.cover.type===1"
            v-lazy='article.cover.images[0]'
            alt=""
            class="thumb"
          />
        </div>
        <!-- 三张图片 -->
        <div class="thumb-box"  v-if="article.cover.type===3">
          <img  v-for="(item,index) in article.cover.images" :key="index"
             v-lazy='item'
            alt=""
            class="thumb"
          />
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span>{{article.aut_name}} &nbsp;&nbsp; {{article.comm_count}} &nbsp;&nbsp; {{article.pubdate|dateFormat}}</span>
          <!-- 关闭按钮 -->
          <van-icon name="cross" @click.stop="show = true"  v-if="closeable"   />
        </div>
      </template>
    </van-cell>
    <!-- 动作面板 -->
   <!-- get-container属性控制不让下拉刷新影响到弹出组件 -->
    <van-action-sheet v-model="show" cancel-text="取消" :closeable="false" @closed='isShow=true' get-container='body'>
  <!-- 第一级反馈面板 -->
  <!-- 点击垃圾作者跳转到返回 -->
  <!-- 点击不感兴趣根据id把这篇文章删除掉 -->
  <div v-if="isShow">
   <van-cell clickable :title="item.name" v-for="item in actions" :key='item.name'  class="center-title"  @click="onCellClick(item.name)"/>
  </div>
  <!--  第二级反馈面板 -->
  <!-- 点击作者跳转到首页 -->
  <div v-else>
    <van-cell v-for="item in reports" :key='item.type'  clickable :title="item.label"  class="center-title" @click="reportArtList(item.type)"  />
   <van-cell   clickable title="返回"  class="center-title"  @click="onBack"/>
  </div>
</van-action-sheet>
  </div>
</template>

<script>

import reports from '@/API/reports.js' // 导入的数据必须先存储在data中才可以使用
import { dislikeArtAPI, reportArtListAPI } from '@/API/homeAPI.js'
export default {
  props: {
    article: { // pubdate title aut_id
      typeof: Object,
      require: true
    },
    closeable: { // 控制小x号的显示和消失 默认为ture 显示
      typeof: Boolean,
      default: true
    }
  },
  data () {
    return {
      // 是否展示反馈面板
      show: false,
      actions: [
        { name: '不感兴趣' },
        { name: '拉黑作者' },
        { name: '反馈垃圾内容' }
      ],
      isShow: true, // 控制一级和二级面板的显示
      reports// 从reports.js导入的数据

    }
  },
  methods: {
    async  onCellClick (name) {
      if (name === '不感兴趣') {
        // 根据id发送请求
        const { data: res } = await dislikeArtAPI(this.artID)
        if (res.message === 'OK') {
          // console.log(res.data)
          // 把id传给父组件 让父组件进行过滤操作
          this.$emit('remove-article', this.artID)
        }
      } else if (name === '拉黑作者') {
        this.show = false
      } else if (name === '反馈垃圾内容') {
        this.isShow = false
      }
    },
    onBack () {
      this.isShow = true
    },
    async  reportArtList (type) { // 给二级面板绑定的事件
      try { // 包裹有可能失败的代码
        await reportArtListAPI(this.artID, type)
        // const { data: res } = await reportArtListAPI(this.artID, type)
        // if (res.message === 'OK') {  //没有意义了 所有也不需要赋值操作了
        // this.$emit('remove-article', this.artID)
        // }
      } catch { // 当失败时 执行catch里的代码
        this.$toast.fail('该文章已经被举报')
      }

      // 和一级面板中不感兴趣操作一致  也是过滤信息
      // 无论成功和失败都要炸楼
      this.$emit('remove-article', this.artID)

      this.show = false
    }
  },
  computed: {
    artID () { // 以后调用id直接this.artID即可
      return this.article.art_id.toString() // 解决大数调用麻烦的问题
    }
  }

}
</script>

<style lang="less" scoped>
.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}
.center-title {
  text-align: center;
}
</style>
